<!--<!doctype html>-->
<html>
  <head>
    <title>Server</title>
    <script src="/static/socket.io-1.2.0.js"></script>
    <script src="/static/jquery-1.11.1.js"></script>
  </head>
  <body>

    <video autoplay id="sourcevid" style="width:100%;height:100%;" autoplay ></video>
    <canvas id="output" style="display:none;width:100%;height:100%;"></canvas>


    <script type="text/javascript" charset="utf-8">

        var socket = io();
        var video = document.getElementsByTagName('video')[0];

        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia || navigator.msGetUserMedia;

        navigator.getUserMedia({video:true, audio:false}, success, console.log);

        function success(stream){
            video.src = window.URL.createObjectURL(stream);
        }





        setTimeout(draw, 100);

        var back = document.getElementById('output');
        var backcontext = back.getContext('2d');

        function draw(){
            try{
                backcontext.drawImage(video,0,0, back.width, back.height);
            }catch(e){
                // if (e.name == "NS_ERROR_NOT_AVAILABLE") {
                //     return setTimeout(draw, 100);
                // } else {
                //     throw e;
                // }
            }
            if(video.src){
                socket.emit('video', back.toDataURL("image/jpeg", 0.5));
            }
            setTimeout(draw, 100);
        }


    </script>


    <script>
      // $(function () {
      //   var socket = io();
      //   $('form').submit(function(){
      //     socket.emit('chat message', $('#m').val());
      //     $('#m').val('');
      //     return false;
      //   });
      //   socket.on('chat message', function(msg){
      //     $('#messages').append($('<li>').text(msg));
      //     window.scrollTo(0, document.body.scrollHeight);
      //   });
      // });
    </script>

  </body>
</html>
